<!--<template>-->
<!--  <div class="news-card-box">-->
<!--    <div class="news-card">-->
<!--      <div class="example-1 card">-->
<!--        <div :id="formData.imageUrl" :style="'background-image: url(' + formData.imageUrl + '); background-size: 100% 100%'" class="wrapper">-->
<!--          <div class="date">-->
<!--            <span class="day">TOP{{ index + 1 }}</span>-->
<!--            <span class="year"> <i class="el-icon-thumb"/> {{ formData.hotValue }}  {{ formData.hotUnit }}</span>-->
<!--          </div>-->
<!--          <div v-if="video" class="video">-->
<!--            <div>-->
<!--              <el-button icon="el-icon-video-play" circle @click="click"/>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="data">-->
<!--            <div class="content">-->
<!--              <h1 class="title"><a :href="formData.url" target="_blank">{{ formData.title }}</a></h1>-->
<!--              <p class="text"> {{ formData.describe }} </p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--    </div>-->

<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--import hotApi from '../../api/hotApi'-->
<!--import videoPlayer from './videoPlayer'-->

<!--export default {-->
<!--  name: 'NewsCardView',-->
<!--  components: {-->
<!--    videoPlayer-->
<!--  },-->
<!--  props: {-->
<!--    index: {-->
<!--      type: Number,-->
<!--      default: 0-->
<!--    },-->
<!--    formData: {-->
<!--      type: Object,-->
<!--      default: () => {-->
<!--        return {-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    base: {-->
<!--      type: Boolean,-->
<!--      default: false-->
<!--    },-->
<!--    video: {-->
<!--      type: Boolean,-->
<!--      default: false-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      url: ''-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // if (this.base) {-->
<!--    //   this.url2Base64(this.formData.imageUrl)-->
<!--    // }-->
<!--  },-->
<!--  methods: {-->
<!--    getImageBlob(url, cb) {-->
<!--      var xhr = new XMLHttpRequest()-->
<!--      xhr.open('get', url, true)-->
<!--      xhr.responseType = 'blob'-->
<!--      xhr.onload = function() {-->
<!--        if (this.status === 200) {-->
<!--          // 这里面可以直接通过URL的api将其转换，然后赋值给img.src-->
<!--          // 也可以使用下面的preView方法将其转换成base64之后再赋值-->
<!--          cb()-->
<!--        }-->
<!--      }-->
<!--      xhr.send()-->
<!--    },-->
<!--    // 这里面将blob转换成base64-->
<!--    preView(url) {-->
<!--      const reader = new FileReader()-->
<!--      this.getImageBlob(url, function(blob) {-->
<!--        reader.readAsDataURL(blob)-->
<!--      })-->
<!--      reader.onload = function(e) {-->
<!--        console.log(e.loaded)-->
<!--      }-->
<!--    },-->
<!--    url2Base64(url) {-->
<!--      const that = this-->
<!--      hotApi.url2Base64(this.formData.imageUrl).then(res => {-->
<!--        console.log(res)-->
<!--        document.getElementById(this.formData.imageUrl)-->
<!--          .setAttribute('style', 'background-image: url(' + res.data + '); background-size: contain')-->
<!--      })-->
<!--    },-->
<!--    click() {-->
<!--      console.log('-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;1&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;')-->
<!--      if (this.video) {-->
<!--        console.log('-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;2&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;')-->
<!--        this.$emit('click', this.formData.videoUrl)-->
<!--      }-->
<!--    }-->

<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="scss">-->

<!--@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);-->
<!--// Variables-->
<!--$regal-blue: #034378;-->
<!--$san-juan: #2d4e68;-->
<!--$bermuda: #77d7b9;-->
<!--$white: #fff;-->
<!--$black: #000;-->
<!--$open-sans: 'Open Sans', sans-serif;-->

<!--// clear-fix mixin-->
<!--@mixin cf {-->
<!--  &::before,-->
<!--  &::after {-->
<!--    content: '';-->
<!--    display: table;-->
<!--  }-->
<!--  &::after {-->
<!--    clear: both;-->
<!--  }-->
<!--}-->

<!--a {-->
<!--  text-decoration: none;-->
<!--}-->

<!--h3 {-->
<!--  font-family: $open-sans;-->
<!--  font-weight: 300;-->
<!--}-->

<!--.news-card-box {-->
<!--  display: flex;-->
<!--  //align-items: center;-->
<!--  width: 98%;-->
<!--  height: 20rem;-->
<!--  overflow: auto;-->
<!--  //background-color: rgba(16 18 27 / 10%);-->
<!--  padding: 20px 40px;-->
<!--  font-family: $open-sans;-->

<!--  .news-card{-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    flex-wrap: wrap;-->
<!--    width: 100%;-->
<!--    height: 20rem;-->
<!--  }-->

<!--  @media screen and (max-width: 945px) {-->
<!--    padding: 20px;-->
<!--  }-->

<!--}-->

<!--// 公共样式-->
<!--.card {-->
<!--  //float: left;-->
<!--  padding: 0px 20px;-->
<!--  margin: 10px 0;-->
<!--  width: 50%;-->

<!--  @media screen and (max-width: 670px) {-->
<!--    width: 100%;-->
<!--  }-->

<!--  .menu-content {-->
<!--    @include cf;-->
<!--    margin: 0;-->
<!--    padding: 0;-->
<!--    list-style-type: none;-->
<!--    li {-->
<!--      display: inline-block;-->
<!--    }-->
<!--    a {-->
<!--      color: $white;-->
<!--    }-->
<!--    span {-->
<!--      position: absolute;-->
<!--      left: 50%;-->
<!--      top: 0;-->
<!--      font-size: 10px;-->
<!--      font-weight: 700;-->
<!--      font-family: 'Open Sans';-->
<!--      transform: translate(-50%, 0);-->
<!--    }-->
<!--  }-->
<!--  .wrapper {-->
<!--    background-color: $white;-->
<!--    height: 380px;-->
<!--    width: 380px;-->
<!--    position: relative;-->
<!--    overflow: hidden;-->
<!--    box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2);-->
<!--    border-radius: 10px;-->
<!--    &:hover {-->
<!--      .data {-->
<!--        transform: translateY(0);-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  .data {-->
<!--    position: absolute;-->
<!--    bottom: 0;-->
<!--    width: 100%;-->
<!--    transform: translateY(calc(100px + 1em));-->
<!--    transition: transform 0.3s;-->
<!--    .content {-->
<!--      border-top-left-radius: 1em;-->
<!--      border-top-right-radius: 1em;-->
<!--      padding: 1em;-->
<!--      position: relative;-->
<!--      z-index: 1;-->
<!--    }-->
<!--  }-->
<!--  .author {-->
<!--    font-size: 12px;-->
<!--  }-->
<!--  .title {-->
<!--    margin-top: 10px;-->
<!--  }-->
<!--  .text {-->
<!--    height: 100px;-->
<!--    margin: 0;-->
<!--    display: -webkit-box;-->
<!--    -webkit-box-orient: vertical;-->
<!--    -webkit-line-clamp: 5;-->
<!--    overflow: hidden;-->
<!--    color: #777777;-->

<!--  }-->
<!--  input[type='checkbox'] {-->
<!--    display: none;-->
<!--  }-->
<!--  input[type='checkbox']:checked + .menu-content {-->
<!--    transform: translateY(-60px);-->
<!--  }-->
<!--}-->

<!--// 第一个样式-->
<!--.example-1 {-->
<!--  .wrapper {-->
<!--    background-size: 100% 100%;-->
<!--    background-repeat: no-repeat;-->
<!--    //background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx2.sinaimg.cn%2Forj480%2F68118f3agy1h5264a0ecxj20u0141ald.jpg&refer=http%3A%2F%2Fwx2.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662890137&t=7ee2d46a61b19e72b430dd0b430ea249) 20% 1% / cover no-repeat;-->
<!--  }-->
<!--  .video {-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    right: 0;-->
<!--    color: $white;-->
<!--    padding: 0.8em;-->
<!--    span {-->
<!--      display: block;-->
<!--      text-align: center;-->
<!--    }-->
<!--  }-->
<!--  .date {-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    left: 0;-->
<!--    background-color: $bermuda;-->
<!--    color: $white;-->
<!--    padding: 0.8em;-->
<!--    span {-->
<!--      display: block;-->
<!--      text-align: center;-->
<!--    }-->
<!--    .day {-->
<!--      font-weight: 700;-->
<!--      font-size: 24px;-->
<!--      text-shadow: 2px 3px 2px rgba($black, 0.18);-->
<!--    }-->
<!--    .month {-->
<!--      text-transform: uppercase;-->
<!--    }-->
<!--    .month,-->
<!--    .year {-->
<!--      font-size: 14px;-->
<!--    }-->
<!--  }-->
<!--  .content {-->
<!--    background-color: $white;-->
<!--    box-shadow: 0 5px 30px 10px rgba($black, 0.3);-->

<!--  }-->
<!--  .title {-->
<!--    a {-->
<!--      color: lighten($black, 35%);-->
<!--    }-->
<!--  }-->
<!--  .menu-button {-->
<!--    position: absolute;-->
<!--    z-index: 999;-->
<!--    top: 16px;-->
<!--    right: 16px;-->
<!--    width: 25px;-->
<!--    text-align: center;-->
<!--    cursor: pointer;-->
<!--    span {-->
<!--      width: 5px;-->
<!--      height: 5px;-->
<!--      background-color: lighten($black, 50%);-->
<!--      color: lighten($black, 50%);-->
<!--      position: relative;-->
<!--      display: inline-block;-->
<!--      border-radius: 50%;-->
<!--      &::after,-->
<!--      &::before {-->
<!--        content: '';-->
<!--        display: block;-->
<!--        width: 5px;-->
<!--        height: 5px;-->
<!--        background-color: currentColor;-->
<!--        position: absolute;-->
<!--        border-radius: 50%;-->
<!--      }-->
<!--      &::before {-->
<!--        left: -10px;-->
<!--      }-->
<!--      &::after {-->
<!--        right: -10px;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  .menu-content {-->
<!--    text-align: center;-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    left: 0;-->
<!--    width: 100%;-->
<!--    z-index: -1;-->
<!--    transition: transform 0.3s;-->
<!--    transform: translateY(0);-->
<!--    li {-->
<!--      width: 33.333333%;-->
<!--      float: left;-->
<!--      background-color: $bermuda;-->
<!--      height: 60px;-->
<!--      position: relative;-->

<!--    }-->
<!--    a {-->
<!--      position: absolute;-->
<!--      top: 50%;-->
<!--      left: 50%;-->
<!--      transform: translate(-50%, -50%);-->
<!--      font-size: 24px;-->

<!--    }-->
<!--    span {-->
<!--      top: -10px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--</style>-->
